<template>
  <div class="head">
    <h3>
      {{ title }}
    </h3>
    <a-divider />
    <a-form-model
      layout="inline"
      :model="form"
      @submit="handleSubmit"
      @submit.native.prevent
    >
      <!--标签显示名称-->
      <a-form-model-item
        v-for="item in formInputs"
        :key="item.model"
        :label="item.label"
      >
        <!--根据type来显示是什么标签-->
        <a-input
          v-model="form[item.model]"
          :placeholder="'请输入' + item.label"
          v-if="item.type === 'input'"
        ></a-input>
        <a-select
          v-model="form[item.model]"
          :placeholder="'请选择' + item.label"
          v-if="item.type === 'select'"
          style="width:140px"
        >
          <!--如果是select或者checkbox 、Radio就还需要选项信息-->
          <a-select-option
            v-for="item in item.opts"
            :key="item.value"
            :title="item.label"
            :value="item.value"
            >{{ item.label }}</a-select-option
          >
        </a-select>
        <a-select
          v-model="form[item.model]"
          :placeholder="'请选择' + item.label"
          v-if="item.type === 'group_select'"
          style="width:150px"
        >
          <a-select-opt-group
            v-for="group in item.groups"
            :key="group.label"
            :label="group.label"
          >
            <a-select-option
              v-for="item in group.opts"
              :key="item.value"
              :title="item.label"
              :value="item.value"
              >{{ item.label }}</a-select-option
            >
          </a-select-opt-group>
        </a-select>
        <a-tree-select
          v-if="item.type === 'tree_select'"
          v-model="form[item.model]"
          style="width:150px"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :search-placeholder="'请选择' + item.label"
          :tree-data="item.opts"
          :replaceFields="item.replaceFields"
        />
        <a-cascader
          v-if="item.type === 'cascader'"
          v-model="form[item.model]"
          :placeholder="'请选择' + item.label"
          :options="item.opts"
          :fieldNames="item.replaceFields"
        />
        <a-switch
          v-model="form[item.model]"
          v-if="item.type === 'switch'"
        ></a-switch>
        <a-date-picker
          v-model="form[item.model]"
          :placeholder="'请选择' + item.label"
          v-if="item.type === 'date'"
          valueFormat="yyyy-MM-dd"
        >
        </a-date-picker>
        <a-range-picker
          showTime
          v-model="form[item.model]"
          v-if="item.type === 'daterange'"
        >
        </a-range-picker>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" html-type="submit" style="margin-right: 10px">
          提交
        </a-button>
        <!-- 插槽备用 -->
        <slot></slot>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
export default {
  props: {
    title: String,
    form: Object, // form表单的绑定对象
    formInputs: Array, // form表单内部输入框
  },
  methods: {
    handleSubmit() {
      this.$emit("clickSubmitForm");
    },
  },
};
</script>
<style lang="less" scoped>
.head {
  margin-bottom: 10px;
  padding: 10px;
  background-color: white;
}
</style>
